<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <script src="../js/public.js"></script>
    <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .fl{float: left;}
        .fr{float: right;}
    	/* 头部   */
    	.mui-bar-nav{background-color: #71BB98;}
    	.mui-bar-nav .mui-title{color:#FFF;font-size:1.2rem;}
    	.mui-bar-nav .mui-action-back{color:#FFF;}
    	/* 消息区域   */
    	.word{width: 100%; height: 8rem; margin: 2.2rem 0 1.2rem;}
    	.word a>div{width: 23%; float: left; margin: 0 1%; text-align: center; background: #FFF; -webkit-box-shadow: 5px 5px #EFF0FB; -moz-box-shadow: 5px 5px #EFF0FB; box-shadow: 5px 5px #EFF0FB;}
    	.word img{height: 4.5rem; margin: 1rem 0 0.5rem; width: 50%;}
    	.word p{text-align: center; height: 2rem; line-height: 2rem; font-size: 1rem; margin-bottom: 0;}
    	.word a>div>span{position: absolute; top: 5rem; background-color: #FF0000;}
    	.word .advices span{left: 20%;}
    	.word .receiving span{left: 44%;}
    	.word .operation span{left: 69%;}
    	.word .audit span{left: 93%;}
    	/* 内容区域 */
    	.mission,.record{width: 98%; margin:0 1% 1rem; background-color: #FFF; padding-top: 0.5rem;padding-bottom:1rem;height: 16.5rem;}
    	.mission h3,.record h3{height: 2.2rem; line-height: 2.2rem; font-size: 1.2rem; margin: 0 1rem; border-bottom: 1px solid #ADADAD; font-weight: 500; color:#F47D00;}
    	.mission h3 span,.record h3 span{border-left: 4px solid #5D74F2; padding-left: 0.6rem; display: inline-block; height: 2rem;}
    	.mission p,.record p{height: 2rem; line-height: 2rem; margin: 0 1rem;}
    	/* 底部   */
    	.mui-bar-tab{color:#FFF;}
    	.mui-bar-tab .mui-tab-item{background-color: #71BB98; color:#FFF;} 
    	.mui-bar-tab .mui-tab-item:first-child{border-right: 1px solid #FFF;}
    	.mui-bar-tab .mui-tab-item .mui-icon{display: inline-block; font-size: 2.5rem;}
    	.mui-bar-tab .mui-tab-item.mui-active{color: red;}
    	.chart_mid_r{padding:0 1rem;height: 85%; overflow-y: scroll;}
    	.chart_mid_r p{height: 1rem;font-size: 0.8rem;margin:0.7rem 0;}
		.chart_mid_r p a{width: 60%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; color:#777777;}
		.chart_mid_r p span{min-width: 152px;width: 23%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
    </style>
</head>
<body>
	<div class="mui-content">
	    <div class="mui-content-padded">
	    	    <div id="pullrefresh" class="mui-content">
				    <div class="mui-content-padded">
						<!---->
						<div class="word">
							<a id="1" href="javascript:void(0);">
								<div class="advices">
									<img src="../images/news.png" alt="" />
									<p>消息</p>
									<span class="mui-badge mui-badge-danger" id="news"></span>
								</div>
							</a>
							<a id="2" href="javascript:void(0);">
								<div class="receiving">
									<img src="../images/receiving.png" alt="" />
									<p>接单</p>
									<span class="mui-badge mui-badge-danger" id="receiving"></span>
								</div>
							</a>
							<a id="3" href="javascript:void(0);">
								<div class="operation">
									<img src="../images/work.png" alt="" />
									<p>作业</p>
									<span class="mui-badge mui-badge-danger" id="work"></span>
								</div>
							</a>
							<a id="4" href="javascript:void(0);">
								<div class="audit">
									<img src="../images/audit.png" alt="" />
									<p>审核</p>
									<span class="mui-badge mui-badge-danger" id="audit"></span>
								</div>
							</a>
						</div>
						<div class="mission">
							<h3><span>我的任务</span></h3>
			                <div id="mission" class="chart_mid_r">
			                	
			                </div>
						</div>
						<div class="record">
							<h3><span>我的记录</span></h3>
						    <div id="record" class="chart_mid_r">
						    	
						    </div>
						</div>
						<!---->
				    </div>
				</div>
	    		
	    	<!---->
	    	<!---->
	    		
	    </div>
	</div>
	
</body>
<script type="text/javascript" charset="utf-8">
    mui.init({
      		swipeBack: false,
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					auto: false,
				    contentdown : "下拉可以刷新",
			    	contentover : "释放立即刷新",
			    	contentrefresh : "正在刷新...",
					callback: xjx
				}
			},
      		tap: true, //默认为true
		   	doubletap: true, //默认为false
		   	longtap: true, //默认为false
		   	swipe: true, //默认为true
		  	drag: true, //默认为true
		  	hold:false,//默认为false，不监听
		  	release:false//默认为false，不监听
      	});
      	function xjx(){
      		location.reload();
      	};
     var user = JSON.parse(localStorage.getItem('$users')).account;
		
     //推送消息
     var news = document.getElementById('news');
     var receiving = document.getElementById('receiving');
     var work = document.getElementById('work');
     var audit = document.getElementById('audit');
     function send(){
     	mui.ajax({
            type: "POST",
		    url: __PATH__+"index/work_order",
		    async: true,
		    data:{
		    	username:user
		    },
		    dataType: "json",
		    json: "jsoncallback",
		    timeout: 1000,
		    success: function(data) {
		    	news.innerHTML=data[0];								    	
		    	receiving.innerHTML=data[1];								    	
		    	work.innerHTML=data[2];								    	
		    	audit.innerHTML=data[3];								    	
		    }
		});
     };
     send();
     setInterval("send()",10000);
    
     //我的任务
    function mission(){
    	mui.ajax({
	        type: "POST",
		    url: __PATH__+"index/work_order_mywork",
		    async: true,
		    data:{
		    	username:user
		    },
		    dataType: "json",
		    json: "jsoncallback",
		    timeout: 1000,
		    success: function(data) {
		    	var mission = data;
				mui.each(mission,function(item,i){
				var html = '<p><input type="hidden" class="abnormal_name" value="'+i.abnormal_name+'"><input type="hidden" class="id" value="'+i.id+'"><input type="hidden" class="updatetime" value="'+i.updatetime+'"><input type="hidden" class="resourceLocation" value="'+i.resourceLocation+'"><input type="hidden" class="resourceNo" value="'+i.resourceNo+'"><input type="hidden" class="resourceName" value="'+i.resourceName+'"><a href="javascript:void(0);" class="fl p">'+i.resourceName+i.abnormal_name+'</a><span class="fr">'+i.updatetime+'</span></p>'
		            mui('#mission')[0].insertAdjacentHTML('afterbegin', html);
				});
		    	console.log(data);
		    									    	
		    }
		});
    }
    setTimeout("mission()",1000);
     //我的记录
     function record(){
    	mui.ajax({
	        type: "POST",
		    url: __PATH__+"index/work_order_mydone",
		    async: true,
		    data:{
		    	username:user
		    },
		    dataType: "json",
		    json: "jsoncallback",
		    timeout: 1000,
		    success: function(data) {
		    	console.log(data)
		    	var record = data;
		    	mui.each(record,function(item,i){
				var html = '<p><input type="hidden" class="abnormal_name" value="'+i.abnormal_name+'"><input type="hidden" class="id" value="'+i.id+'"><input type="hidden" class="updatetime" value="'+i.updatetime+'"><input type="hidden" class="resourceLocation" value="'+i.resourceLocation+'"><input type="hidden" class="resourceNo" value="'+i.resourceNo+'"><input type="hidden" class="resourceName" value="'+i.resourceName+'"><a href="javascript:void(0);" class="fl p">'+i.resourceName+i.abnormal_name+'</a><span class="fr">'+i.updatetime+'</span></p>'
		            mui('#record')[0].insertAdjacentHTML('afterbegin', html);
				});
		    	console.log(data);
		    									    	
		    }
		});
    }
    setTimeout("record()",2000);
    //
     //
	mui('.word').on('tap','a',function(){
		var atid = this.id;	
		switch(atid){					
			case '1':
				mui.openWindow({
					url:"news.html",
					id:"news",
					style:{},
					show:{
						autoShow:true,
						aniShow:"slide-in-right",
						duration:100
					},
					waiting:{
						autoShow:true,
						title:"正在加载·····"
					}
				})
			break;
			case '2':
				mui.openWindow({
					url:"receiving.html",
					id:"receiving",
					style:{},
					show:{
						autoShow:true,
						aniShow:"slide-in-right",
						duration:100
					},
					waiting:{
						autoShow:true,
						title:"正在加载·····"
					}
			    })
			break;
			case '3':
				mui.openWindow({
					url:"work_2.html",
					id:"work_2",
					style:{},
					show:{
						autoShow:true,
						aniShow:"slide-in-right",
						duration:100
					},
					waiting:{
						autoShow:true,
						title:"正在加载·····"
					}
				})
			break;
			case '4':
				mui.openWindow({
					url:"audit.html",
					id:"audit.html",
					style:{},
					show:{
						autoShow:true,
						aniShow:"slide-in-right",
						duration:100
					},
					waiting:{
						autoShow:true,
						title:"正在加载·····"
					}
				})
			break;
		}
	});
	//我的任务跳转
	mui('#mission').on('tap','p',function(){
		var updatetime = $(this).children('.updatetime').val();
		var id = $(this).children('.id').val();
		var resourceLocation = $(this).children('.resourceLocation').val();
		var resourceNo = $(this).children('.resourceNo').val();
		var resourceName = $(this).children('.resourceName').val();
		var abnormal_name = $(this).children('.abnormal_name').val();
		mui.openWindow({
				url:"work.html",
				id:"work",
				style:{},
			   extras:{
				   	updatetime:updatetime,
				   	id:id,
				   	resourceLocation:resourceLocation,
				   	resourceNo:resourceNo,
				   	resourceName:resourceName,
				   	abnormal_name:abnormal_name
			   },
				show:{
					autoShow:true,
					aniShow:"slide-in-right",
					duration:100
				},
				waiting:{
					autoShow:true,
					title:"正在加载·····",
					options:{
		//				width:
		//				height:
					}
				}
		})
	});
	//我的记录跳转
	//我的任务跳转
	mui('#record').on('tap','p',function(){
		mui.openWindow({
				url:"enquiries.html",
				id:"enquiries",
				style:{},
				show:{
					autoShow:true,
					aniShow:"slide-in-right",
					duration:100
				},
				waiting:{
					autoShow:true,
					title:"正在加载·····",
					options:{
		//				width:
		//				height:
					}
				}
		})
	});
	//
</script>
</html>